
<template>
  <div>
    <Header />
    <div class="back">
      <div class="container">
        <Nested :list="nestedList" />
        <UniversityHeader />
        <div class="university-detail-content"></div>
        <Tabs v-model:activeKey="activeKey" type="card">
          <TabPane v-for="(item, index) in tabs" :key="index" :tab="item" style="min-height: 50vh;">
            <template v-if="index === 0">
              <div class="content-center">
                <div class="content-center-left">
                  <UniversityDetail />
                </div>
                <UniversityPopular class="content-center-right" />
              </div>
            </template>
            <template v-if="index === 1">
              <div class="content-center">
                <div class="content-center-left">
                  <UniversityDetails />
                </div>
                <UniversityPopular class="content-center-right" />
              </div>
            </template>
            <template v-if="index === 2">
              <div class="content-center">
                <div class="content-center-left">
                  <AdmissionDetai />
                </div>
                <UniversityPopular class="content-center-right" />
              </div>
            </template>
            <template v-if="index === 3">
              <div class="content-center">
                <div class="content-center-left">
                  <UniversityScore />
                </div>
                <UniversityPopular class="content-center-right" />
              </div>
            </template>
            <template v-if="index === 4">
              <div class="content-center">
                <div class="content-center-left">
                  <UniversityScore />
                </div>
                <UniversityPopular class="content-center-right" />
              </div>
            </template>
            <template v-if="index === 5">
              <div class="content-center">
                <div class="content-center-left">
                  <AdminssionPlan />
                </div>
                <UniversityPopular class="content-center-right" />
              </div>
            </template>
          </TabPane>
        </Tabs>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script lang="ts" setup>
import { mapState } from 'ssr-hoc-vue3'
import { ref } from 'vue'
import Header from '@/components/header/index.vue'
import Footer from '@/components/footer/index.vue'
import { NestedType } from '~/web/components/nested/nested';
import Nested from '@/components/nested/index.vue'
import UniversityHeader from '@/components/universityDetail/universityHeader/index.vue'
import { Tabs } from 'ant-design-vue'
import UniversityPopular from '@/components/universityPopular/index.vue'
import UniversityDetail from '@/components/universityDetail/index.vue'
import AdmissionDetai from '@/components/universityDetail/admissionsOverview/detail.vue'
import UniversityDetails from '@/components/universityDetail/admissionsOverview/university.vue'
import UniversityScore from '@/components/universityDetail/universityScore/index.vue'
import AdminssionPlan from '@/components/universityDetail/admissionsPlan/index.vue'
const TabPane = Tabs.TabPane

const nestedList = ref<NestedType[]>([{ name: '首页', path: '/' }, { name: '院校库', path: '/university' }, { name: '清华大学' }])
const activeKey = ref(0)
const tabs = ref([
  "大学概况",
  "院校简介",
  "招生简章",
  "录取分数",
  "专业分数线",
  "招生计划",
  "开设专业",
  "重点学科",
  "大学排名",
  "招生问答",
  "院校印象",
  "校友评价"
])
const detailData = mapState().detailStore.value.data
console.log(detailData)

</script>

<style scoped>
@import "./index.less";

:deep(.title-span) {
  color: black;
  font-size: 20px;
}

:deep(.content) {
  padding: 20px 25px;
}
</style>